/*!
 * LuCI Bootstrap Theme
 * Copyright 2012 Nut & Bolt
 * By David Menting <david@nut-bolt.nl>
 * Based on Bootstrap v1.4.0
 *
 * Copyright 2011 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
/* Reset.less
 * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here	that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
 * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* Adapatado para el botadero (2016), para personalizar colores facilmente busque : */ 
/* -C- */

html {
	margin: 0;
	padding: 0;
}

body {
	margin: 0;
	padding: 14px;
  /* background-image: url("../botadero_resources/logo.png"); */
	background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6, p, pre, a, abbr, acronym, code, del, em, img, q, s,
small, strike, strong, sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset,
form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1;
	font-family: inherit;
v}

table {
	border-collapse: collapse;
	border-spacing: 1;
	/* -C- */
	border-color: #A1A095;
	border-style: solid;
	border-width: 2px;	
}

ol, ul {
	list-style: none;
}

html {
	overflow-y: scroll;
	font-size: 100%;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}

a:focus {
	outline: thin dotted;
}

a:hover, a:active {
	font-weight: bolder;
	border-bottom-width: 2px;
	border-bottom-style: solid;
	outline: 0;
}

button,
input,
select,
option,
textarea {
	font-size: 100%;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	vertical-align: baseline;
	*vertical-align: middle;
}

button, input {
	line-height: normal;
	*overflow: visible;
}

button::-moz-focus-inner, input::-moz-focus-inner {
	border: 0;
	padding: 0;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	cursor: pointer;
	-webkit-appearance: button;
}

input[type="search"] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

input[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

textarea {
	overflow: auto;
	vertical-align: top;
}

/*
 * Scaffolding
 * Basic and global styles for generating a grid system, structural layout, and page templates
 * ------------------------------------------------------------------------------------------- */
body {
  /* -C- */
  background-color: #EFEECA;
  color: #232210;
  
  background-size: 80px;
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: normal;
  line-height: 18px;
  padding-top: 38px;
}

.container {
  width: 100%;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
  transform: scale();
}

.container:before, .container:after {
  display: table;
  content: "";
  transform: scale();
}

.container:after {
  clear: both;
}

a {
  /* -C- */
  color: #3A3820;
  border-bottom: 1px #49480F;
  
  border-bottom-style: dotted;
  text-decoration: none;
  font-weight: bold;
  line-height: inherit;
  font-weight: bold;
}

a:hover {
  /* -C- */
  color: #262603;
  
  font-weight: bolder;
  border-bottom-width: 2px;
  border-bottom-style: solid;
  text-decoration: none;
}

.pull-right {
  float: right;
}

.pull-left {
  float: left;
}

/* Typography.less
 * Headings, body text, lists, code, and more for a versatile and durable typography system
 * ---------------------------------------------------------------------------------------- */
p,
.cbi-map-descr,
.cbi-section-descr {
  font-size: 13px;
  font-weight: normal;
  line-height: 18px;
  margin-bottom: 9px;
}

p small {
  font-size: 11px;
  color: #bfbfbf;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: bold;
  
  /* -C- */
  color: #343420;
}

h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  color: #bfbfbf;
}

h1 {
  margin-bottom: 10px;
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  font-family: serif;
}

h1 small {
  align-content: center;
  font-size: 18px;
}

h2 {
  font-size: 24px;
  line-height: 36px;
}

h2 small {
  font-size: 14px;
}

h3,
h4,
h5,
h6 {
  line-height: 36px;
}

h3 {
  font-size: 18px;
}

h3 small {
  font-size: 14px;
}

h4 {
  font-size: 16px;
}

h4 small {
  font-size: 12px;
}

h5 {
  font-size: 14px;
}

h6 {
  font-size: 13px;
  color: #bfbfbf;
  text-transform: uppercase;
}

ul, ol {
  margin: 0 0 18px 25px;
}

ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li {
  line-height: 18px;
  
  /*color: #808080;*/
}

ul.unstyled {
  list-style: none;
  margin-left: 0;
}

dl {
  margin-bottom: 18px;
}

dl dt, dl dd {
  line-height: 18px;
}

dl dt {
  font-weight: bold;
}

dl dd {
  margin-left: 9px;
}

hr {
  margin: 20px 0 19px;
  border: 0;
  border-bottom: 1px solid #eee;
}

strong {
  font-style: inherit;
  font-weight: bold;
}

em {
  font-style: italic;
  font-weight: inherit;
  line-height: inherit;
}

small { font-size: 0.9em }

address {
  display: block;
  line-height: 18px;
  margin-bottom: 18px;
}

code, pre {
  padding: 0 3px 2px;
  font-family: Monaco, Andale Mono, Courier New, monospace;
  font-size: 12px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

code {
  background-color: #FEFECC; /* -C- */
  color: rgba(0, 0, 0, 0.75);
  padding: 1px 3px;
}

pre {
  background-color: #f5f5f5;
  display: block;
  padding: 8.5px;
  margin: 0 0 18px;
  line-height: 18px;
  font-size: 12px;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Forms.less
 * Base styles for various input types, form layouts, and states
 * ------------------------------------------------------------- */
form {
  margin-bottom: 18px;
}

fieldset {
  margin-bottom: 9px;
  padding-top: 9px;
}

fieldset legend {
  display: block;
  font-size: 19.5px;
  line-height: 1;
  color: #404040;
  padding-top: 20px;
  *padding: 0 0 5px 0px;
  /* IE6-7 */

  *line-height: 1.5;
  /* IE6-7 */

}

label,
input,
select,
textarea {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: normal;
  line-height: normal;
}

select {
  padding: initial;
}

select, input[type=file] {
  *height: auto;
  *margin-top: 4px;
  /* For IE7, add top margin to align select with labels */
}

select[multiple] {
  height: inheriinhet;
  background-color: #ffffff;
}

textarea {
  height: auto;
}

.uneditable-input {
  background-color: #ffffff;
  display: block;
  border-color: #eee;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  cursor: not-allowed;
}

::-moz-placeholder {
  color: #bfbfbf;
}

::-webkit-input-placeholder {
  color: #bfbfbf;
}

input, textarea {
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  -ms-transition: border linear 0.2s, box-shadow linear 0.2s;
  -o-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:focus, textarea:focus {
  outline: 0;
  border-color: rgba(82, 168, 236, 0.8);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

input[type=file]:focus, input[type=checkbox]:focus, select:focus {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  outline: 1px dotted #666;
}

input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  background-color: #f5f5f5;
  border-color: #ddd;
}


/*
 * Tables.less
 * Tables for, you guessed it, tabular data
 * ---------------------------------------- */
table {
  width: 100%;
  margin-bottom: 18px;
  padding: 0;
  border-collapse: collapse;
  font-family: monospace;
  font-size: 14px;
  
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025);
  box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.025);
}

table th, table td {
  padding: 10px 10px 9px;
  line-height: 18px;
  text-align: left;
}

table th {
  padding-top: 9px;
  font-weight: bold;
  vertical-align: middle;
}

table td {
  vertical-align: top;
  
  /* -C- */
  border-top: 1px solid #C6BFC6;
}

table tbody th {
  border-top: 1px solid #ddd;
  vertical-align: top;
}

footer {
  margin-top: 17px;
  padding-top: 17px;
  border-top: 1px solid #eee;
}

.btn.danger,
.alert-message.danger,
.btn.danger:hover,
.alert-message.danger:hover,
.btn.error,
.alert-message.error,
.btn.error:hover,
.alert-message.error:hover,
.btn.success,
.alert-message.success,
.btn.success:hover,
.alert-message.success:hover,
.btn.info,
.alert-message.info,
.btn.info:hover,
.alert-message.info:hover {
  color: #ffffff;
}

.btn .close, .alert-message .close {
  font-family: Arial, sans-serif;
  line-height: 18px;
}

.btn.danger,
.alert-message.danger,
.btn.error,
.alert-message.error {
  /* -C- */
  background-color: #c43c35;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
  background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
  background-image: linear-gradient(top, #ee5f5b, #c43c35);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #c43c35 #c43c35 #882a25;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.success, .alert-message.success {
  background-color: #57a957;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn.info, .alert-message.info {
  background-color: #339bb9;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
  background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
  background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
  background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
  background-image: linear-gradient(top, #5bc0de, #339bb9);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #339bb9 #339bb9 #22697d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.btn,
.cbi-button {
  cursor: pointer;
  display: inline-block;
  background-color: #e6e6e6;
  background-repeat: no-repeat;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));
  background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);
  background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);
  padding: 5px 14px 6px;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
  color: #333;
  font-size: 13px;
  line-height: normal;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.active, .btn:active {
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.btn.disabled {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn[disabled] {
  cursor: default;
  background-image: none;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  filter: alpha(opacity=65);
  -khtml-opacity: 0.65;
  -moz-opacity: 0.65;
  opacity: 0.65;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.btn.large {
  font-size: 15px;
  line-height: normal;
  padding: 9px 14px 9px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px;
}

.btn.small {
  padding: 7px 9px 7px;
  font-size: 11px;
}

:root .alert-message, :root .btn {
  border-radius: 0 0;
}

button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
  padding: 0;
  border: 0;
}

.close {
  float: right;
  color: #000000;
  font-size: 20px;
  font-weight: bold;
  line-height: 13.5px;
  text-shadow: 0 1px 0 #ffffff;
  filter: alpha(opacity=25);
  -khtml-opacity: 0.25;
  -moz-opacity: 0.25;
  opacity: 0.25;
}

.close:hover {
  color: #000000;
  text-decoration: none;
  filter: alpha(opacity=40);
  -khtml-opacity: 0.4;
  -moz-opacity: 0.4;
  opacity: 0.4;
}

.alert-message {
  position: relative;
  padding: 7px 15px;
  margin-bottom: 18px;
  
  color: #404040;
  background-color: #eedc94;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#fceec1), to(#eedc94));
  background-image: -moz-linear-gradient(top, #fceec1, #eedc94);
  background-image: -ms-linear-gradient(top, #fceec1, #eedc94);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fceec1), color-stop(100%, #eedc94));
  background-image: -webkit-linear-gradient(top, #fceec1, #eedc94);
  background-image: -o-linear-gradient(top, #fceec1, #eedc94);
  background-image: linear-gradient(top, #fceec1, #eedc94);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fceec1', endColorstr='#eedc94', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #eedc94 #eedc94 #e4c652;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  border-width: 1px;
  border-style: solid;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.alert-message .close {
  margin-top: 1px;
  *margin-top: 0;
}

.alert-message a {
  font-weight: bold;
  color: #404040;
}

.alert-message.danger p a,
.alert-message.error p a,
.alert-message.success p a,
.alert-message.info p a {
  color: #ffffff;
}

.alert-message h5 {
  line-height: 18px;
}

.alert-message p {
  margin-bottom: 0;
}

.alert-message div {
  margin-top: 5px;
  margin-bottom: 2px;
  line-height: 28px;
}

.alert-message .btn {
  -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

.label {
  padding: 1px 3px 2px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
  white-space: nowrap;
  
  /* -C- */
  background-color: #89895F;
  color: #ffffff !important;
  
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  text-shadow: none;
}

a.label:link,
a.label:visited {
  color: #ffffff;
}

a.label:hover {
  text-decoration: none;
}

.label.important {
  /* -C- */
  background-color: #c43c35;
}

.label.warning {
  /* -C- */
  background-color: #f89406;
}

.label.success {
  /* -C- */
  background-color: #46a546;
}

.label.notice {
  /* -C */
  background-color: #CAC574;
  
  white-space: normal;
  font-weight: normal;
  text-transform: none;
}

/*
   BOTADERO
 */

.qu {
  padding: 3px;
  font-size: 16px;
  color:#3C3914; /*  -C- */
  font-family: serif;
  font-style: italic;
  text-align: center;
}

.nota {
  font-size: 15px;
  /* -C- */
  color: #33311B;

  font-family: sans-serif;
}

.caja_lista_archivos {
  outline-width: 2px;
  outline-style: solid;
  padding: 10px;
  margin-bottom: 2em;
  margin-right: 1em;
  
  /* -C- */
  background-color: #E3D94F;
  outline-color: #8E8E5B;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(33, 33, 2, 0.82);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(33, 33, 2, 0.82);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(33, 33, 9, 0.82);
}
.caja_lista_archivos a {
  border-bottom-style: none;
}
.lista_archivos_elemento {
  padding-left: 5px;
  padding-right: 4px;
  word-wrap: break-word;
  line-height: 167%;	/* Interlineado */
  text-align: justify;
  
  font-family: monospace;
  font-size: 14px;
  
  /* -C- */
  background-color: #E5DE8D;
}

#Dias_muchos{
  color: #3D713D;
  font-weight: normal;
}

#dias_moderados{
  color: #5C4C2B;
  font-weight: bold;
}

#dias_pocos{
  color: #DD1719;
  font-weight: bolder;
}

#categorias{
  padding-top: 5px;
  padding-bottom: 7px;
}

.categoria{
  font-size: 22px;
}

#dropbox {
  border: 2px dashed #000000;
  font-family: monospace;
  font-size: 10px;
  padding: 20px;
  margin-right: 1em;
}

#dropbox.active {
  border: 4px dashed #FF0A0E;
}

.progress-trough {
  border: 1px solid #000000;
  height: 18px;
  width: 100%;
  position: relative;
}

.progress-bar {
  width: 50%;
  height: 100%;
  /* -C- */
  background-color: #E9DC0F;
}
/* -- modal */

 /* The Modal (background) */
.modal_subir {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-subir-content {
  position: relvative;
  background-color: #fefefe;
  margin-top: 5%;
  margin-botton: 5%;
  margin-left: 9%;
  margin-right: 9%;
  /*margin: 10% auto; /* 10% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 75%; /* Could be more or less, depending on screen size */
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s
}

/* Modal Header */
.modal-subir-header {
    padding: 5px 10px;
    /* -C- */
    background-color: #DEDADE;
}

.modal-subir-body {padding: 2px 10px;}

/* The Close Button */
.closeModalSubir {
  color: #c16159;
  float: right;
  font-size: 42px;
  font-weight: bold;
}

.closeModalSubir:hover,
.closeModalSubir:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {top:-300px; opacity:0}
  to {top:0; opacity:1}
}
/* end modal */

/* --------------column wraps----------------- */
div#wrap {
    min-height: 100%;
    padding:1.5em 1.5em 1.8em 1.5em;
}

@media screen and (max-width: 2200px) {
    div#wrap {
	padding:1em 1.2em 1.5em 1.2em;
    }
}

@media screen and (max-width: 1440px) {
    div#wrap {
	padding:1em 1em 1.5em 1em;
    }
}

@media screen and (max-width: 1024px) {
    div#wrap {
	padding:.5em 0.4em 1.5em 0.4em;
    }
}

@media screen and (max-width: 800px) {
    div#wrap {
	padding:1em .1em 1.5em .1em;
    }
}

.row,.col,
.row:after,.col:after,
.row:before,.col:before{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
/* clearfix */
.row{*transform:scale()}
.row:before,
.row:after{
    display:table;
    content:"";
    line-height:0}
.row:after{clear:both}
.row{
    padding:0;
    margin:0;
}
/* should probably put *zoom:1; here but for clarity it's separated*/
ul.row,
li.col{ list-style-type:none }
.col{float:left}
.col,
.fill{width:100%}

.tc{width: 85%;}

/* grid mq */
@media (min-width:40em){
    .col:not(.fill){width:50%}
    .col.third:nth-child(3),
    .col.fifth:nth-child(5),
    .col.fourth+div:nth-child(3).fill,
    .col.fifth+div:nth-child(3).fill{width:100%}
    .col+.fill{width:50%}
}
@media (min-width:55em){
    .col.half{width:50%}
    .col.half+.fill{width:50%}
    .col.third,
    .col.third:nth-child(3){width:33.333%}
    .col.third+.fill{width:66.666%}
    .col.fourth{width:25%}
    .col.fourth+.fill{width:75%}
    .col.fourth+div:nth-child(3).fill{width:50%;}
    .col.fifth,
    .col.fifth:nth-child(5){width:20%}
    .col.fifth+.fill{width:80%}
    .col.fifth+div:nth-child(3).fill{width:60%;}
    .col.fifth+div:nth-child(4).fill{width:40%;}
}
/* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */

/* @media (min-width:30em){ */
/* 	.row>.col{width:50%} */
/* 	.row>.fill.col{width:100%} */
/* 	.row>.half.col+.fill, */
/* 	.row>.third.col+.fill, */
/* 	.row>.fourth.col+.fill, */
/* 	.row>.fifth.col+.fill, */
/* 	.row>.fifth.col+div+div+.fill{width:50%} */
/* 	.row>.fourth.col+div+.fill, */
/* 	.row>.fifth.col+div+.fill, */
/* 	.row>.third.col+div+div, */
/* 	.row>.fifth.col+div+div+div+div{width:100%} */
/* } */
@media (min-width:40em){
    .row>.third.col,
    .row>.third.col+div+div{width:33.333%}
    .row>.third.col+.fill{width:66.666%}
    .row>.fourth.col{width:25%}
    .row>.fourth.col+.fill{width:75%}
    .row>.fourth.col+div+.fill{width:50%}
    .row>.fifth.col+.fill{width:80%}
    .row>.fifth.col,
    .row>.fifth.col+div+div+div+div{width:20%}
    .row>.fifth.col+div+.fill{width:60%}
    .row>.fifth.col+div+div+.fill{width:40%}
}
/* ----------------- */
